<template>
    <div class="stat-card">
      <h3>{{ value }}</h3>
      <p>{{ label }}</p>
    </div>
  </template>
  
  <script setup>
  defineProps({
    value: {
      type: [String, Number],
      required: true
    },
    label: {
      type: String,
      required: true
    }
  })
  </script>
  
  <style scoped>
  .stat-card {
    background: var(--light);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    transition: var(--transition);
  }
  
  .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
  }
  
  .stat-card h3 {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 5px;
  }
  
  .stat-card p {
    color: var(--gray);
    font-size: 0.9rem;
  }
  </style>